﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
	</head>
	<body>

<img src="TypograFix1.jpg" />

<h2>Introduction</h2>
<p>I&rsquo;d like to show a rather small (but suitably complex) HTML reprocessing/pretty-printing
  script that improves typography in HTML documents. Though I offer the script as 
  part of a WPF/WinForms application (it&#39;s somewhat easier to see the results that 
  way), the main goal of the script is to be applied to HTML-formatted text 
  entered into various online editing systems (e.g., blogs).</p>
<h2>Problem</h2>
<p>Even though web typography is not (and never will be) the equal of book 
  typography when it comes to typographic fidelity, there are a few cases where 
  adjusting HTML content to make it more print-like makes sense. Here&#39;s a few:</p>
<ul>
  <li>Quotes. Basically, HTML does fairly ugly and inappropriate vertical quotes. If 
    you type quoted text in MS Word, you&#39;ll see that they are changed to more 
    rounded ones. This substitution is automatic, and can be easily applied to HTML.<br />
    Note: quotes are different in different countries. My algorithm inserts English quotes, but you can easily change it to produce other types of 
    quotes (e.g., Russian angled ones).</li>
  <li>Dashes. Not as noticeable, but the hyphen (-) is really not the best way to 
    make a dash, mainly because it&#39;s too short. There are two dashes &ndash; one 
    is called an &#39;en&#39; dash (has width similar to the letter &#39;n&#39;) and the other is 
    the &#39;em&#39; dash (as wide as an &#39;m&#39;). En dashes are most common and are used to 
    separate words &ndash; like this. Em dashes are more specific, and are typically 
    denoted as two dashes (--) before processing.<br />
    Note: certain online resources (I won&#39;t name names here) like to abuse dashes by 
    using the Em dash almost exclusively.</li>
  <li>Copyright signs. I often catch myself writing (C) instead of the proper 
    copyright sign. 
    Same applies to &reg; and &#8482; ones, too.</li>
  <li>Arrows. This is more of a nicety than a must-have typographic feature, but 
    arrows are nicely done in browsers, so using them
    is one of the good ways to enhance an already good-looking document. The only 
    problem is that you still need to write the &amp;lt;/&amp;gt; escape characters before 
    the processing tool adjusts these for you.</li>
  <li>Multiplication sign. Using x may seem acceptable, but having &times; instead adds that little bit of flair.</li>
  <li>Ellipsis. I bet most of my readers wouldn&#39;t actually notice the difference 
    between three dots in a row and a proper ellipsis. However, you get this 
    substitution for free &ndash; not that exciting in itself, admittedly. What is 
    exciting, however, is being able to replace a stand-alone horizontal ellipsis 
    (by stand-alone I mean three dots on a single line) with a vertical ellipsis. 
    This is great for showing code with some of the parts skipped.</li>
</ul>
<p>
  For a given chunk of HTML, the above substitutions can be done automatically in 
  a fairly safe manner. In order to apply them to my HTML documents (e.g., the 
  articles I prepare for CodeProject), I wrote a script that makes the necessary 
  adjustments and spits out an improved version of the HTML you feed it. The 
  section below shows some examples of what it looks like.</p>
<h2>Showcase</h2>
<p>Let&#39;s take a look at the substitions in action. The table below show text as 
  entered (i.e., HTML), how it is rendered before reprocessing, and after.</p>
<table border="0" cellspacing="5">
  <tr>
    <th>Before</th>
    <th>After</th>
  </tr>
  <tr>
    <td>the so-called 'single quotes'</td>
    <td>the so-called &lsquo;single quotes&rsquo;</td>
  </tr>
  <tr>
    <td>"Double quotes," he said.</td>
    <td>&ldquo;Double quotes,&rdquo; he said.</td>
  </tr>
  <tr>
    <td>(c), (r) and (tm) Dmitri, 2008</td>
    <td>&copy;, &reg; and &#8482; Dmitri, 2008</td>
  </tr>
  <tr>
    <td>Have today - gone tomorrow</td>
    <td>Have today &ndash; gone tomorrow</td>
  </tr>
  <tr>
    <td>
      The worst omen--of death!</td>
      <td>
      The worst omen&mdash;of death!</td>
  </tr>
  <tr>
    <td>
      And so I wait...</td>
      <td>
      And so I wait&hellip;</td>
  </tr>
  <tr>
    <td>A 4x4 item means a 16x increase</td>
    <td>A 4&times;4 item means a 16&times; increase</td>
  </tr>
  <tr>
    <td>money --&gt; power</td>
    <td>money &rarr; power</td>
  </tr>
  <tr>
    <td>
<pre>var ar = t.BeginInvoke(null,null);
...
int n = t.EndInvoke(ar);
</pre>
    </td>
    <td>
<pre>var ar = t.BeginInvoke(null,null);
&#8942;
int n = t.EndInvoke(ar);
</pre>
    </td>
  </tr>
</table>
<h2>The Algorithm</h2>
<p>The algorithm is actually one function called <code>TypografixTransform()</code>. What it does is read the
supplied HTML character by character, making sure to avoid reformatting in places where it might be
unsuitable (e.g., inside <code>code</code>, <code>pre</code> or <code>script</code> tags), and applying it
in cases where it is. Although a fairly &lsquo;safe&rsquo; algorithm, I have only tested it on simple texts.
It was originally developed (and included with) the <a href="http://www.dotnetblogengine.net/">BlogEngine.net</a> blogging platform. However, I have been
improving the algorithm since then, so what I&rsquo;m posting here is a much newer version.</p>
<h2>Usage</h2>
<p>The WPF program I provide with this article takes unformatted HTML and does its 
  best to prettify it by applying the above features and outputting an updated 
  version. The preview window on the right shows what you'll get.</p>
  <p>One disadvantage of the script is that if you are using a tool like Visual Studio,
  then it will try to format your quotes into the corresponding (but <em>wrong</em>)
  HTML entites. For example, it replaces double quotes with <code>&amp;quot;</code> escapes,
  which happen to represent the ugly vertical quotes we want to avoid.</p>
<h2>Conclusion</h2>
<p>I have used the above script a couple of times for preparing articles for CodeProject. It works well 
  enough, but I&rsquo;m pretty sure it doesn&rsquo;t pick up all the annoying errors. 
  Therefore, if you find something, please let me know.</p>
	</body>
</html>